<template>
	<view>
		<!-- <view class="">
			地图预留
			<view class="echarts" ref="topMap">

			</view>
		</view> -->
		<!-- 第一 -->
		<view class="ele">
			<view class="ele_title">重点监管货物类别流量统计</view>
			<!-- 循环 -->
			<view class="oneItem">
				<view class="goods_left">
					<view class="goods_left_item"></view>
					<view class="goods_left_item" v-for="item in goodList" :key="item.content">
						第{{item.content}}类
					</view>
				</view>
				<view class="goods">
					<view class="goods_item">
						货物流出（单位：吨）
					</view>
					<!-- 循环 -->
					<view class="goods_item" v-for="item in goodList" :key="item.content">
						<view class="goods_pro" :style="'flex:'+Math.floor(
                    Number(item.flowOut) /
                      (Number(item.flowOut) + Number(item.inflow))
                  ) +';background: #60C6CF;'">

						</view>
						<view class="goods_num">
							{{item.flowOut}}
						</view>
					</view>
				</view>
				<view class="goods">
					<view class="goods_item">
						货物流入（单位：吨）
					</view>
					<!-- 循环 -->
					<view class="goods_item" v-for="item in goodList" :key="item.content">
						<view class="goods_pro" :style="'flex:'+Math.floor(
					  Number(item.inflow) /
					    (Number(item.flowOut) + Number(item.inflow))
					) +';background: #E6C12C;'">

						</view>
						<view class="goods_num">
							{{item.inflow}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 第二 -->
		<view class="ele">
			<view class="ele_title">流量流向统计</view>
			<view class="oneItem">
				<view class="goods_left">
					<view class="goods_left_item">总流量</view>
					<!-- 循环 -->
					<view class="goods_left_item">{{twoTotal}}</view>
				</view>
				<view class="goods">
					<view class="goods_item">货物流出（单位：吨）</view>
					<!-- 循环 -->
					<view class="goods_item">
						<view class="goods_pro"
							:style="'flex:' +Math.floor(twoList.flowOut / twoTotal)+';background: #60C6CF;'"></view>
						<view class="goods_num">{{twoList.flowOut}}</view>
					</view>
				</view>
				<view class="goods">
					<view class="goods_item">
						货物流入（单位：吨）
					</view>
					<!-- 循环 -->
					<view class="goods_item">
						<view class="goods_pro"
							:style="'flex:' +Math.floor(twoList.inflow / twoTotal)+';background: #E6C12C;'"></view>
						<view class="goods_num">{{twoList.inflow}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 第三 -->
		<view class="ele">
			<view class="ele_title">主要线路货运量统计排名</view>
			<view class="three">
				<view class="three_item">
					<view class="thr_index">
						1
					</view>
					<view class="thr_text">
						马鞍山市-淮北市
					</view>
					<view style="flex:1;">
						<view class="thr_pro"
							style="width: 80%;background: linear-gradient(90deg, #24C768 0%, #FFDE00 50%, #FF7800 100%);">
						</view>
					</view>
					<view class="thr_num">
						1234
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cargoFlowCount,
		cargoAnalogyFlow
	} from '@/common/api/monitor.js'
	export default {
		data() {
			return {
				names: ["第1类", "第2类", "第3类"],
				goodList: [],
				twoList: {}, //流向统计
				twoTotal: 0, //总量
			};
		},
		mounted() {
			this.cargoAnalogyFlow()
			this.cargoFlowCount()
		},
		methods: {
			//重点监管
			cargoAnalogyFlow() {
				cargoAnalogyFlow().then(res => {
					console.log(res);
					this.goodList = res.data.data
				})
			},
			//流向统计
			cargoFlowCount() {
				cargoFlowCount().then(res => {
					this.twoTotal = (Number(res.data.data.inflow) + Number(res.data.data.flowOut)).toFixed(2);
					this.twoList = res.data.data;
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.echarts {
		width: 100%;
		height: 400rpx;
	}

	.ele {
		border-top: 1px solid #F0F0F0;
		padding: 20rpx 20rpx 20rpx 20rpx;
		height: auto;

		.ele_title {
			color: #196CC6;
			font-size: 28rpx;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
		}
	}

	.oneItem {
		width: calc(100% - 0rpx);
		display: flex;
		justify-content: space-between;
	}

	.goods_left {
		font-size: 24rpx;

		.goods_left_item {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.goods {
		width: 38%;
		font-size: 24rpx;

		.goods_item {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.goods_pro {
				height: 10rpx;
				border-radius: 20rpx;
			}

			.goods_num {
				width: 100rpx;
				text-align: center;
			}
		}
	}

	.three {
		width: 100%;
		height: auto;

		.three_item {
			margin-bottom: 20rpx;
			width: 100%;
			height: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;

			.thr_pro {
				height: 10rpx;
				border-radius: 20rpx;
			}

			.thr_index {
				width: 70rpx;
				text-align: center;
				// background: pink;
			}

			.thr_text {
				width: 220rpx;
				text-align: center;
			}

			.thr_num {
				width: 140rpx;
				text-align: center;
				color: #20D39E;
				// background-color: #196CC6;
			}
		}
	}
</style>
